<template>
  <transition name="hint">
    <div class="hint_box" :class="flag ? 'success': 'fail'">
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="flag ? '#icon-chenggong':'#icon-shibai'"></use>
      </svg>
      <span :style="{color:flag ? 'white' : 'red'}">{{$store.state.hint.title}}</span>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Hint',
  computed: {
    flag(){
      return this.$store.state.hint.icon
    }
  }
};
</script>

<style scoped>
.hint_box{
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 10px 30px;
  background-color: rgb(98, 255, 98);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 2px rgb(179, 179, 179);
  letter-spacing: 2px;
  z-index: 9999;
}
.fail{
  background-color: gray;
}
.hint_box .icon{
  font-size: 1.2em;
}
.hint_box span{
  font-size: 0.8rem;
}
.hint-enter{
  top: 0;
  opacity: 0;
}
.hint-enter-active{
  transition: all .5s ease;
}
.hint-enter-to{
  top: 50px;
  opacity: 1;
}
</style>